{% import "macro.html.twig" as web_macro %}
<style>
.course-wide-list .enabled:hover{

    background: #eee;
    border-color: #ddd;
}

.course-wide-list .enabled{

    cursor: default;
    background: #eee;
}

</style>
<ul class="course-wide-list">
  {% for courseSet in courseSets  %}
    <li class="course-item clearfix"   data-id="{{courseSet.id}}" >
      <a class="course-picture-link" href="{{ path('course_show',{id: courseSet.defaultCourseId}) }}" target="_blank">
        <img class="course-picture" src="{{ filepath(course_set_cover(courseSet, 'middle'), 'course.png') }}" alt="{{ courseSet.title }}">
      </a>
      <div class="course-body">
        <div style="float:right;" class="color-gray mrm mls">
          {% include 'open-course-manage/course-set-price-interval.html.twig' %}

          {% if setting('course.show_student_num_enabled', '1') == 1 %}
            <span class="divider"></span>
            <span class="color-gray mrm mls"><strong>{{ courseSet.studentNum }}</strong>{{ 'site.default.student'|trans }}</span>
          {% endif %}

        </div>

        <h4 class="course-title"><a href="{{ path('course_show',{id: courseSet.defaultCourseId}) }}" target="_blank">{{ courseSet.title }}</a>
        {% if courseSet.serializeMode=='serialized' %}
          <span class="label label-success ">{{'course.status.serialized'|trans}}</span>
        {% elseif courseSet.serializeMode=='finished' %}
          <span class="label label-warning ">{{'course.status.finished'|trans}}</span>
        {% endif %}

        {% if courseSet.type == 'live' %}
            {% set task = courseSet['task']|default(null) %}
            {% if task and "now"|date("U") >= task.startTime and "now"|date("U") <= task.endTime %}
              <span class="label label-warning">{{'course.block_grid.onlive'|trans}}</span>
            {% else %}
              <span class="label label-success">{{'course.block_grid.live'|trans}}</span>
            {% endif %}
        {% endif %}
        </h4>

        {% if courseSet.type == 'live' %}
          {% set task = courseSet.task|default(null) %}
          {% if task %}
            <div class="live-course-lesson mbm">
              <span class="color-success fsm mrm">{{ task.startTime|date('n月j日 H:i'|trans) }} ~ {{ task.endTime|date('n月j日 H:i'|trans) }}</span>
              <span class="color-gray fsm mrm">{{'course.block_grid.taskNumber'|trans({'%number%': task.number,'%taskName%': setting('course.task_name')|default('admin.setting_course.task'|trans)})}}</span>
            </div>
          {% endif %}
        {% else %}
          <div class="course-about ellipsis">{{ courseSet.subtitle }}</div>
        {% endif %}

        <div class="course-footer clearfix">
          {% set teacher = users[courseSet.teacherIds|first|default(courseSet.creator)] %}
          {% if teacher %}
            <div class="teacher">
              <a href="{{ path('user_show', {id:teacher.id}) }}" target="_blank"><img src="{{ filepath(teacher.smallAvatar, 'course.png') }}" class="teacher-avatar"></a>
              <a class="teacher-nickname ellipsis" target="_blank"  href="{{ path('user_show', {id:teacher.id}) }}">{{ teacher.nickname }}</a>
              <span class="teacher-title ellipsis">{{ teacher.title }}</span>
            </div>
          {% endif %}

          <div class="course-metas-{{courseSet.id}}" style="display:none;">
            <span class="es-icon es-icon-done pull-right" style="z-index:100;color:#02b980;font-size:30px;"></span>
          </div>

        </div>
      </div>
    </li>
  {% else %}
    <div class="empty">{{'course.block_grid.empty_hint'|trans}}</div>
  {% endfor %}
</ul>

{% if paginator|default(null) %}
  {% if type|default('') == 'ajax_pagination' %}
    {{ web_macro.ajax_paginator(paginator|default(null)) }}
  {% else %}
    {{ web_macro.paginator(paginator|default(null)) }}
  {% endif %}
{% endif %}
